<!DOCTYPE html>
<!--aus owner协议之后的协议 -->
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=false" />

    <title>SATISFACTION & COMPLETION NOTIFICATION</title>
    <link href="../../css/common.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        body,
        div,
        dl,
        dt,
        dd,
        ul,
        ol,
        li,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        pre,
        code,
        form,
        fieldset,
        legend,
        input,
        texarea,
        p,
        blockquote,
        th,
        td {
            margin: 0px;
            padding: 0px;
        }
        
        body {
            overflow-x: hidden;
            font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
            font-weight: normal;
            line-height: 1.5;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        
        div,
        p {
            word-wrap: break-word;
        }
        
        .container {
            padding: 16px;
            background-color: #ffffff;
            font-size: 15px;
            color: #444444;
            opacity: 1;
            margin-bottom: 64px;
        }
        
        .bottomContainer {
            width: 100%;
            position: fixed;
            bottom: 0;
            background-color: #ffffff;
        }
        
        input[type="image"] {
            -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
            -webkit-user-select: none;
            -moz-user-focus: none;
            -moz-user-select: none;
            -webkit-appearance: none;
            outline: none;
            border: none;
        }
        .contentText {
            font-size: 15px;
            color: #444444;
            opacity: 1;
        }
        
        .titleText {
            font-size: 20px;
            font-weight: bold;
            line-height: 26px;
            color: #252224;
            opacity: 1;
            margin-top: 14px;
        }
        
        .boldText {
            font-weight: bold;
        }
        
        .centerText {
            text-align: center;
        }
        
        .top_margin_30 {
            margin-top: 30px;
        }
        
        .top_margin_14 {
            margin-top: 14px;
        }
        
        .top_margin_10 {
            margin-top: 10px;
        }
        
        .textField {
            padding-left: 8px;
            flex: 1;
            border-bottom: 1px solid #444444;
        }
    </style>
</head>

<body>
    <div class="container" style="position: relative">
        <div>
            <img src="../../images/logo_pic.png" style="width: 216px; height: 48px" />
            <div class="titleText">SATISFACTION & COMPLETION NOTIFICATION</div>
        </div>
        <div class="top_margin_30">
            To: Humm<br />1ST Floor<br />97 Pirie Street<br />Adelaide SA 5000
        </div>

        <div class="top_margin_30">
            <p>Dear Sir / Madam</p>
            <p class="top_margin_14">
                This form must be completed to assure HUMM that you have received and are satisfied with the goods and services we are funding on your behalf. You are not required to sign the document until you are completely satisfied.
            </p>
            <p class="top_margin_10">Kind Regards</p>
            <p>Humm Customer Service</p>
        </div>

        <hr class="top_margin_30" style="background-color: #444444; height: 1px; border: none" />
        <div class="top_margin_30" style="position: relative">
            <p class="boldText centerText">SERVICE PROVIDER COMPLETES</p>
            <div class="top_margin_14" style="display: flex">
                <div style="min-width: 141px">Name of Service Provider:</div>
                <div class="boldText textField" id="field_retailer_name">
                    AUS SOLAR CO
                </div>
            </div>

            <div class="top_margin_14" style="display: flex">
                <div style="min-width: 141px">Service Technician:</div>
                <div class="boldText textField" id="filed_installer_name">
                    Installer Name
                </div>
            </div>
        </div>

        <hr class="top_margin_30" style="background-color: #444444; height: 1px; border: none" />

        <div class="top_margin_30">
            <p class="boldText centerText">NOTICE OF SATISFACTORY COMPLETION</p>
            <p class="top_margin_14">
                I, the undersigned, wish to advise HUMM that the construction or services provided to my home from the above company have been completed to my satisfaction.
            </p>

            <p class="top_margin_10">
                I will have no problem in re-paying the HUMM funding provided on my behalf in accordance with the HUMM Credit Schedule.
            </p>
        </div>

        <div class="top_margin_30">
            <p class="boldText centerText">HOMEOWNER COMPLETES</p>
            <p>
                Job completed satisfactorily and/ or installed on:
                <span class="boldText">
                    Date: <span id="field_install_time"> </span>
                </span>
            </p>
            <div class="top_margin_14" style="display: flex">
                <div style="width: 69px">SIGNED :</div>
                <div class="textField">
                    <i>The signature will be filled in here</i>
                </div>
            </div>

            <div class="top_margin_14" style="display: flex">
                <div style="width: 69px">Name :</div>
                <div class="textField boldText" id="filed_owner_name">Owner Name</div>
            </div>

            <div class="top_margin_10" style="text-align: center">(Print)</div>

            <div class="top_margin_30">
                Dated this day the
                <u class="boldText">
                        &nbsp;&nbsp;<span id="filed_day"></span>&nbsp;&nbsp;
                    </u> of
                <u class="boldText">
                        &nbsp;&nbsp;<span id="filed_month"></span>&nbsp;&nbsp;
                    </u> 20
                <u class="boldText">
                        &nbsp;&nbsp;<span id="filed_year"></span>&nbsp;&nbsp;
                    </u>
            </div>
        </div>
    </div>
    <div class="bottomContainer">
        <div class="summitDiv">
            <button type="button" class ="summitButton" onclick="submit()">I Agree & Continue</button>
<!--                <input type="image" src="../images/btn_i_agree_sign.png" style="width: 164px;height: 64px;" onclick="submit()" />-->
        </div>
    </div>
</body>
<script type="text/javascript" src="../../javascripts/platform.js"></script>
<script language="javascript">
    var data;

    function init_pvd_detail(detail) {
        data = detail;
        init_data(data);
    }


    function init_data(jsonData) {

        var retailerName = jsonData.company;
        var installerName = jsonData.signatures.installer_full_name;
        var install_date = format_time(jsonData.system_detail.installation_date);
        var ownerName = jsonData.signatures.owner_full_name;

        var now = new Date();
        var date_string = now.toDateString().split(" ");
        var day = date_string[2];
        var month = date_string[1];
        var year = date_string[3];
        var show_year = year.substring(year.length - 2, year.length);

        document.getElementById("field_retailer_name").innerHTML = retailerName;
        document.getElementById("filed_installer_name").innerHTML = installerName;
        document.getElementById("field_install_time").innerHTML = install_date;
        document.getElementById("filed_owner_name").innerHTML = ownerName;
        document.getElementById("filed_day").innerHTML = day;
        document.getElementById("filed_month").innerHTML = month;
        document.getElementById("filed_year").innerHTML = show_year;
    }

    function add_input_params(jsonData) {
        let local = getLocalParam('inputparam');
        local['suburb'] = jsonData.install_address.suburb;
        local['state'] = jsonData.install_address.state;
        local['post_code'] = jsonData.install_address.post_code;
        addParamToLocal('inputparam', local);
    }

    function format_time(input) {
        var dateChars = input.split('/');
        if (dateChars.length > 2) {
            return dateChars[2] + "/" + dateChars[1] + "/" + dateChars[0];
        }
        return input;
    }



    let doc_version = "1";

    function submit() {
        let localInputParam = getLocalParam('inputparam');
        let local = getLocalParam('param');
        local["statement_input_param_all"] = JSON.stringify(localInputParam);
        local["owner_satisfaction_completion_version"] = doc_version;
        addParamToLocal('param', local);

        if (isIos) {
            window.webkit.messageHandlers.WebViewEvent.postMessage(local);
        }
        if (isAndroid) {
            myJsBridge.submit(JSON.stringify(local));
        }
        //跳转到原生签名页面
    }

    function getLocalParam(paramName) {
        var local = localStorage.getItem(paramName);
        if (local != "" && local != null && local != undefined) {
            console.log(local)
            return JSON.parse(local);
        } else {
            return {};
        }
    }

    function addParamToLocal(paramName, dictionary) {
        localStorage.setItem(paramName, JSON.stringify(dictionary));
    }


    if (isAndroid) {
        let json = myJsBridge.initData();
        init_pvd_detail(JSON.parse(json));
    }

    if (isIos) {
        window.webkit.messageHandlers.event.postMessage({
            "event": "getPvddetail"
        });
    }
</script>

</html>
<!-- field_retailer_name  retailer名字 -->
<!-- filed_installer_name installer名字 -->
<!-- field_install_time install 时间 -->
<!-- filed_owner_name  owner名字 -->
<!-- filed_day 日 -->
<!-- filed_month 月 -->
<!-- filed_year 年后两位 -->
